<template>
  <div ref="vtime" class="v-time">
    <div ref="vitemWrap" class="v-item-wrap">
      <div ref="hour" class="item">
        <ul :style="{ paddingBottom: paddingBottom }">
          <li
            :ref="'li' + ind"
            :class="{ active: ind == hourActInd && click }"
            @click="liClick(ind, 0)"
            v-for="(hour, ind) in hour"
            :key="hour"
          >
            {{ hour }}
          </li>
        </ul>
      </div>
      <div ref="minute" class="item">
        <ul :style="{ paddingBottom }">
          <li
            :class="{ active: ind == minuteActInd && click }"
            @click="liClick(ind, 1)"
            v-for="(minute, ind) in minute"
            :key="minute"
          >
            {{ minute }}
          </li>
        </ul>
      </div>
      <div ref="second" class="item">
        <ul :style="{ paddingBottom }">
          <li
            :class="{ active: ind == secondActInd && click }"
            @click="liClick(ind, 2)"
            v-for="(second, ind) in second"
            :key="second"
          >
            {{ second }}
          </li>
        </ul>
      </div>
    </div>
    <div class="btn flex">
      <button class="cancel" @click="cancel">清空</button>
      <button class="confirm" @click="confirm">确定</button>
    </div>
  </div>
</template>
<script>
import Emitter from "../../assets/emitter";
export default {
  name: "VTime",
  componentName: "VTime",
  data() {
    return {
      hour: [],
      minute: [],
      second: [],
      height: 0,
      clientH: 0,
      hourActInd: 0,
      minuteActInd: 0,
      secondActInd: 0,
      click: false,
    };
  },
  mixins: [Emitter],
  computed: {
    paddingBottom() {
      return this.clientH - this.height + "px";
    },
  },
  created() {
    this.fillHMS();
    this.$on("init", this.initTime);
  },
  mounted() {
    this.scrollHeight();
  },
  methods: {
    scrollHeight() {
      this.height = this.$refs.li0[0].clientHeight;
      this.clientH = this.$refs.vitemWrap.clientHeight;
    },
    fillHMS() {
      for (let i = 0; i < 24; i++) {
        this.hour.push(i < 10 ? "0" + i : i);
      }
      for (let j = 0; j < 60; j++) {
        this.minute.push(j < 10 ? "0" + j : j);
        this.second.push(j < 10 ? "0" + j : j);
      }
    },
    initTime(val) {
      const valArr = val.split(":");
      this.click = true;
      valArr.forEach((ele, ind) => {
        this.liClick(Number(valArr[ind]), ind);
      });
      console.log(this.hourActInd, this.minuteActInd, this.secondActInd);
    },
    liClick(ind, type) {
      this.click = true;
      switch (type) {
        case 0:
          this.hourActInd = ind;
          this.scrollTo("hour", ind);
          break;
        case 1:
          this.minuteActInd = ind;
          this.scrollTo("minute", ind);
          break;
        case 2:
          this.secondActInd = ind;
          this.scrollTo("second", ind);
          break;
      }
      const time =
        this.hour[this.hourActInd] +
        ":" +
        this.minute[this.minuteActInd] +
        ":" +
        this.second[this.secondActInd];
      this.dispatch("VTimePicker", "input", [time]);
    },
    scrollTo(type, ind) {
      this.$refs[type].scrollTo({
        top: this.height * ind,
        left: 0,
        behavior: "smooth",
      });
    },
    confirm() {
      this.$parent.showVTime = false;
    },
    cancel() {
      this.dispatch("VTimePicker", "input", [""]);
      this.$parent.showVTime = false;
    },
  },
};
</script>
<style lang="less" scoped>
.v-time {
  border: 1px solid #eee;
  background: #fff;
  .item {
    display: inline-block;
    vertical-align: top;
    width: 33.33%;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    li {
      width: 100%;
      height: 24px;
      line-height: 24px;
      text-align: center;
      cursor: pointer;
      &:hover {
        color: #fff;
        background: #ff5858;
      }
      &.active {
        color: #fff;
        background: #ff5858;
      }
    }
  }
  .btn {
    padding: 8px;
    justify-content: flex-end;
    border-top: 1px solid #eee;
    button {
      height: 24px;
      padding: 0 7px;
      color: #515a6e;
      border: 1px solid #dcdee2;
      border-radius: 3px;
      background-color: #fff;
      &.confirm {
        margin-left: 10px;
        color: #fff;
        border-color: #ff5858;
        background-color: #ff5858;
      }
    }
  }
}
</style>
